<template>
  <div class="list-chart" style="width: 745px; height: 280px">
    <div class="title">销售额Top城市排行榜</div>
    <div class="seamless-warp">
      <table cellspacing="0" cellpadding="0" class="tab">
        <tr class="tr-th">
          <th>序号</th>
          <th>城市</th>
          <th>价格</th>
          <th>数量</th>
        </tr>
        <tr
          v-for="(item, index) in arr"
          :key="index"
          style="border: 1px dashed #ffffff; width: 100%"
          class="moving"
        >
          <td class="tab_title">
            <div v-if="item.id">{{ item.id }}</div>
          </td>
          <td class="tab_title">{{ item.city }}</td>
          <td class="tab_title">{{ item.price }}</td>
          <td class="tab_title">{{ item.number }}</td>
        </tr>
      </table>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      arr: [
        { id: 1, city: '深圳', price: '164909.84', number: '213' },
        { id: 2, city: '中山', price: '164333.78', number: '214' },
        { id: 3, city: '潮州', price: '146764.52', number: '232' },
        { id: 4, city: '湛江', price: '146067.76', number: '204' },
        { id: 5, city: '东沙群岛', price: '145307.97', number: '184'},
        { id: 6, city: '佛山', price: '143766.53', number: '210' },
        { id: 7, city: '阳江', price: '137796.85', number: '214' },
        { id: 8, city: '梅州', price: '136387.19', number: '171' },
        { id: 9, city: '梅州', price: '136387.19', number: '171' },
        { id: 10, city: '梅州', price: '136387.19', number: '171' },
        { id: 11, city: '梅州', price: '136387.19', number: '171' },
        { id: 12, city: '梅州', price: '136387.19', number: '171' },
        { id: 13, city: '梅州', price: '136387.19', number: '171' },
        { id: 14, city: '梅州', price: '136387.19', number: '171' },
        { id: 15, city: '梅州', price: '136387.19', number: '171' },
        { id: 16, city: '梅州', price: '136387.19', number: '171' }
      ]
    };
  }
};
</script>
<style lang="less" scoped>
.list-chart {
  width: 100%;
  height: 310px;
  background-color: #ffffff;
  .title {
    height: 40px;
    line-height: 40px;
    padding-left: 8px;
    padding-right: 30px;
    color: rgb(85, 85, 85);
    text-align: left;
    font-size: 14px;
  }
  .seamless-warp {
    width: 730px;
    height: 230px;
    margin: 5px 10px 5px 10px;
    overflow: hidden;
    .tab {
      animation: move 15s ease-in infinite;
      width: 100%;
      height: 260px;
      .tr-th {
        background-color: #fafafa;
        color: #505050;
        font-size: 17px;
        th:first-child {
          text-align: left;
          padding-left: 20px;
        }
        th:last-child {
          text-align: right;
          padding-right: 10px;
        }
      }
      tr {
        font-size: 13px;
        color: rgb(69, 84, 88);
        th {
          height: 36px;
        }
        td {
          text-align: center;
          height: 24.3px;
          div {
            background: rgb(224, 152, 199);
            width: 20.8px;
            height: 20.8px;
            text-align: center;
            line-height: 23px;
            border-radius: 50%;
          }
        }
        td:first-child {
          padding-left: 25px;
          color: #fff;
        }
        td:last-child {
          text-align: right;
          padding-right: 10px;
        }
      }
      tr:nth-child(2n + 3) {
        background: #ffffff;
      }
      tr:nth-child(2n + 2) {
        background: #f7f7f9;
      }
      tr:nth-child(-n + 4) {
        div {
          background: rgb(155, 139, 186);
        }
      }
    }
  }
}
@keyframes move {
  0% {
    transform: translateY(0px);
  }
  45% {
    transform: translateY(0px);
  }
  55% {
    transform: translateY(-224px);
  }
  100% {
    transform: translateY(-224px);
  }
}
</style>
